// 安全监控系统  预览模式下 断电区域相关功能的组件开发
import component from "../Component.js"
import {LayerType,ServiceType} from "../../experience/db/SafeMonitorType.js"
import Type from "../../experience/db/Type.js";
import {$$} from "../../experience/utils/F7.js";

export default class LayerEditColor extends component {
    constructor() {
        super()
    }

    control() {
        // this.LayerColorDialog = null
        this.popup = this.app.popup.create({ el: '.sm-layercolor-pop' });
        $$("#layer-color-popup").on("click", async () => {
            const checkBox = this.$$('.sm-layercolor-pop article')
            const layerTemplate = await this.LayerCheckBoxTemplateCreate()
            const innerCheckBox = `<div class="list list-strong-ios list-outline-ios list-dividers-ios">
                                            <ul>
                                              ${layerTemplate}
                                            </ul>
                                      </div>`
            checkBox.html('')
            checkBox.append(innerCheckBox)
            this.popup.open()

        });
        $$('#layer-color-submit').on('click',async () => {
            const checkboxList = document.getElementsByName('layer-color-checkbox')
            // 要修改颜色值的 图层列表
            const ExtractLayers = []
            checkboxList.forEach((checkboxitem) => {
                if(checkboxitem.checked) {
                    ExtractLayers.push(checkboxitem.value)
                }
            })
            const submitColor = $$('#color-checkbox').val()

            const layerinfos = await this.db.operation('layer','getAll')
            const filterinfos = layerinfos.filter((info) => {
                return ExtractLayers.some((l) => {
                    return l == info.layer
                })
            })
            const filterIds = filterinfos.map((info) => {
                return info.id
            })
            const {data} = await this.api.updateLayerRenderColor(ServiceType.Meta_Id,filterIds,submitColor)
            await this.db.refresh(LayerType.Layer,data.layers)
            // 更新图层颜色
            this.drawer.refreshLayerCustomColor()

        })
        this.$$('#layer-color-Cancel').on('click',() => {
        })

    }

    template() {
        const div = `
            <div class="popup upload-popup sm-layercolor-pop" style="height: 340px;">
                <header style="display: flex;align-items: center;gap: 10px">
                    <span>图层颜色设置</span>
                    <input type="color" style="border-color: lightgray" id="color-checkbox" />
                </header>
                <article style="height: 240px;overflow-y: auto">
                </article>
                <footer class="uploader-footer">
                    <p style="flex: 3"></p>
                    <div style="flex: 1;width: 90px">
                        <button style="flex: 1" class="button button-fill color-theme-blue popup-close" id="layer-color-submit">确定</button>
                    </div>
                    <div style="flex: 1;width: 90px">
                        <button id="layer-color-Cancel"  class="button button-fill color-gray popup-close">取消</button>
                    </div>
                </footer>
            </div>
        `
        const LayerColorEditBtn = `<div id="layer-color-popup" class="GisUtilIcon" style="position: absolute;top: 250px;left: 25px;z-index: 999"><i class="fas fa-palette"></i></div>`
        $$("body").append(LayerColorEditBtn);
        $$('#app').append(div);
    }

    async LayerCheckBoxTemplateCreate() {
        const layers = await this.db.operation(Type.Layer,'getAll')
        let checkBoxTemplate = ''
        layers.forEach((layer) => {
            checkBoxTemplate = checkBoxTemplate.concat(`<li>
            <label class="item-checkbox item-checkbox-icon-start item-content">
              <input type="checkbox" name="layer-color-checkbox" value="${layer.layer}" />
              <i class="icon icon-checkbox"></i>
              <div class="item-inner">
                <div class="item-title">${layer.layer}</div>
              </div>
            </label>
          </li>`)
        })

        return checkBoxTemplate
    }
}